<template>

  <el-dialog
    title="现付账详细信息"
    :visible.sync="dialogVisible"
    append-to-body
    width="50%"
  >
    <el-table
      :data="cashBillsList"
      border
      style="width: 100%;"
    >
      <el-table-column
        prop="billNo"
        header-align="center"
        align="center"
        label="单据号"
        show-overflow-tooltip="true"
      >
      </el-table-column>

      <el-table-column
        prop="name"
        header-align="center"
        align="center"
        label="消费点"
      >
        <template slot-scope="scope">

          <el-tag type="warning"> {{scope.row.name}}</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        prop="courseInfo"
        header-align="center"
        align="center"
        label="消费信息"
      >
      </el-table-column>

      <!-- <el-table-column
        prop="projectId"
        header-align="center"
        align="center"
        label="地点Id">
      </el-table-column> -->
      <!-- <el-table-column
        prop="type"
        header-align="center"
        align="center"
        label="挂房账"
      >
        <template slot-scope="scope">
          <el-tag>{{scope.row.type==1?'是':'否'}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="peopleName"
        header-align="center"
        align="center"
        label="挂账人"
      >
        <template slot-scope="scope">
          {{scope.row.type==1?scope.row.peopleName:''}}
        </template>
      </el-table-column> -->
      <el-table-column
        prop="consumeMoney"
        header-align="center"
        align="center"
        label="消费金额"
      >
      </el-table-column>
      <el-table-column
        prop="payType"
        header-align="center"
        align="center"
        label="付款"
      >
      </el-table-column>
      <el-table-column
        prop="note"
        header-align="center"
        align="center"
        label="备注"
      >
      </el-table-column>
      <el-table-column
        prop="createTime"
        header-align="center"
        align="center"
        label="创建时间"
      >
      </el-table-column>
      <!-- <el-table-column
        prop="updateTime"
        header-align="center"
        align="center"
        label="修改时间">
      </el-table-column> -->
      <el-table-column
        prop="state"
        header-align="center"
        align="center"
        label="状态"
      >
        <template slot-scope="scope">
          <el-tag :type="stateMap[scope.row.state]">
            {{scope.row.state==1?'已结账':'未结账'}}
          </el-tag>
        </template>
      </el-table-column>

    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[5,10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>
  </el-dialog>

</template>

<script>
import Moment from 'moment'
export default {
  data () {
    return {
      cashBillsList: [],
      time: '',
      dialogVisible: false,
      pageIndex: 1,
      pageSize: 5,
      totalPage: 0,
      isDay: '日',
      stateMap: ['danger', 'success']
    }
  },
  methods: {
    init (time, isDay) {
      this.cashBillsList = []
      this.pageIndex = 1,
        this.pageSize = 5,
        this.totalPage = 0,
        this.dialogVisible = true
      this.time = time
      this.isDay = isDay
      this.getCashBillsList()
    },
    getCashBillsList () {
      this.dialogVisible = true
      console.log("time", this.time)
      if (this.isDay == "日") {
        this.time = Moment(this.time).format('YYYY-MM-DD')
      }
      if (this.isDay == "月") {
        this.time = Moment(this.time).format('YYYY-MM')
      }
      this.$http({
        url: this.$http.adornUrl('/hotel/thotelcashbills/listByTime'),
        method: 'get',
        params: this.$http.adornParams({
          page: this.pageIndex,
          limit: this.pageSize,
          time: this.time,
          isDay: this.isDay
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log(data)
          this.cashBillsList = data.page.records
          this.totalPage = data.page.total;
        } else {

        }
      })
    },

    filterTime (row, column, cellValue, index) {
      return Moment(row.time).format('YYYY-MM-DD')
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getAccountData();
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val;
      this.getAccountData();
    },
  }
}
</script>